<template>
  <a-row
    style="position: fixed; top: 20px; left: 20px; width: 100%; z-index: 1000;"
  >
    <a-col :span="4">
      <a-button
        type="default"
        shape="round"
        size="large"
        @click="handleLogout"

        style="box-shadow: 0 4px 12px rgba(0,0,0,0.1);"
      >
        返回
      </a-button>
    </a-col>
  </a-row>


  <a-layout class="font-inter min-h-screen">
    <a-layout-content class="flex-grow pt-24 md:pt-32 pb-12">
      <!-- Background Image Section - Full Width -->
      <div class="hero-background mb-8 relative">
        <img
          src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80"
          alt="Team Background"
          class="w-screen h-50 object-cover"
        />
      </div>

      <!-- Avatar positioned between background and profile card -->
      <div class="avatar-container">
        <a-avatar :size="160" :src="teamStore.teamDetails.logo" class="shadow-avatar" />
      </div>
      <div style="margin-top: -130px; position: relative; z-index: 1">
        <CreatorProfileCard />
      </div>
      <div class="container mx-auto px-6" style="width: 1200px; margin: 0 auto">
        <!-- 战队资料 -->
        <a-row :gutter="24" justify="center">
          <!-- 文章-->
          <a-col :span="24" :lg="18" style="width: 600px">
            <ContentFeed
              :articles="filteredArticles"
              :currentPage="currentPage"
              :pageSize="pageSize"
              :totalItems="totalItems"
              :searchQuery="searchQuery"
              @search-input="val => searchQuery = val"
              @page-change="handlePageChange"
              @star-toggle="handleStarToggle"
            />
          </a-col>
        </a-row>
      </div>
      <!-- 固定在右下角的按钮（推荐） -->

      <a-row style="position: fixed; bottom: 20px; width: 100%; z-index: 9999;">
        <!-- 左边占18格，用于“偏右”布局 -->
        <a-col :span="19"></a-col>

        <!-- 按钮在右边6格内显示 -->
        <a-col :span="5">
          <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-left: 12px;">
            <a-button
              type="primary"
              shape="round"
              @click="handleinto"
              style="width: 50px; height: 50px; font-size: 24px;"
            >
              +
            </a-button>
          </div>
        </a-col>
      </a-row>


    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import CreatorProfileCard from './CreatorProfileCard.vue'
import ContentFeed from './ContentFeed.vue'

import { getTeamDetails } from '@/api/sysTeamController' //加载战队的信息
import { getAuditedPostPageList } from '@/api/bizPostController' //加载帖子的请求
import { useTeamStore } from '@/stores/teamStore'
//帖子的状态机
import { usePostStore } from '@/stores/postStore'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
// Reactive data
const scrollY = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const totalItems = ref(40)

// 新增：搜索关键字和过滤后的文章
const searchQuery = ref('')

const postStore = usePostStore()
const { postList } = storeToRefs(postStore)
const articles = computed(() => postList.value)
const filteredArticles = computed(() => {
  if (!searchQuery.value) return articles.value
  const keyword = searchQuery.value.toLowerCase()
  return articles.value.filter(article =>
    (article.title || '').toLowerCase().includes(keyword)
  )
})

const route = useRoute()
const router = useRouter()
//战队信息

// Methods
const handleScroll = () => {
  scrollY.value = window.scrollY
}
const handlePageChange = (page: number) => {
  currentPage.value = page
  message.info(`加载第 ${page} 页`)
}
const handleStarToggle = (articleId: number) => {
  // 收藏功能如需实现请用store或其他方式
  message.success('已切换收藏状态')
}

const teamStore = useTeamStore()
//获取帖子的请求表单
const getPostParams = reactive({
  pageListVo: {
    current: 1,
    pageSize: 10,
    title: '',
    tagId: '',
    sortField: '',
    sortOrder: '',
    teamId: route.query.teamId,
    startPublishTime: '',
    endPublishTime: ''
  }
})
//帖子的状态机

// Lifecycle
onMounted(() => {
  window.addEventListener('scroll', handleScroll)

  // 获取战队详情
  getTeamDetails({ teamId: route.query.teamId })
    .then((res) => {
      if (res?.data?.code === 0) {
        teamStore.setTeamDetails(res.data.data)
      } else {
        message.error(res?.data?.message || '获取战队详情失败')
      }
    })
    .catch((error) => {
      message.error('请求失败，请检查网络或稍后再试')
      console.error('getTeamDetails error:', error)
    })
  //获取帖子
  getAuditedPostPageList(getPostParams)
    .then((res) => {
      if (res?.data?.code === 0) {
        const list = res.data.data.list || []
        const total = res.data.data.total || 0
        postStore.setPostList(list, total)
      } else {
        message.error(res?.data?.message)
      }
    })
    .catch((error) => {
      message.error('请求失败，请检查网络或稍后再试')
      console.error('getAuditedPostPageList error:', error)
    })
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
//退出函数
const handleback = () => {
  router.back()
  console.log('退出')
}
//进入函数

const handleinto = () => {
  router.push({
    path: '/addText',
    query: {
      teamId: route.query.teamId
    }
  })
}
//, query: { teamId: route.query.teamId }
// 退出函数
const handleLogout = () => {
  router.push({ name: 'teamLearningPlatform' })
}

// 监听ContentFeed的search-input事件
function handleSearchInput(val: string) {
  searchQuery.value = val
}
</script>

<style scoped>
.aaa {
  position: fixed;
  bottom: 20px;
  right: 450px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 50px;
  height: 50px;
  font-size: 24px;
  /* margin:auto; */
  /* text-align: center;
  margin: auto 0; */
}

.aaaa {
  position: fixed;
  bottom: 80px;
  right: 450px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 50px;
  height: 50px;
  font-size: 24px;
}


.bg-light {
  background-color: #f9fafb;
}

.text-neutral-800 {
  color: #1f2937;
}

.font-inter {
  font-family: 'Inter', sans-serif;
}

/* Hero background styles */
.hero-background {
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.hero-background img {
  height: 200px;
  width: 100%;
  object-fit: cover;
  min-width: 100vw;
}

/* Avatar container styles */
.avatar-container {
  display: flex;
  justify-content: center;
  margin-top: -80px;
  margin-bottom: 40px;
  position: relative;
  z-index: 10;
}

.shadow-avatar {
  border: 4px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

</style>
